<template>
  <div class="backgroundColor1 container fixed donationRecord">
    <div style="position:absolute;top:0px;right:0;width:100vw;height: 100vh;z-index: 4" @click="maskHide" v-if="markShow"></div>
    <Header
      content="捐助记录"
      :showRightSel="true"
      @right="seleCoin"
      :current="current"
      :list="listDown"
      @downItem="downItem"
      contentText="专区"
      :showRightDwon="showRightDwon"
    ></Header>
    <div class="backgroundColor tabContain">
      <scroller
        :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
        :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
        lock-x
        height="-46"
        ref="scrollerIncome"
        @on-pullup-loading="onScrollBottom()"
        :use-pullup="true"
        :use-pulldown="true"
        @on-pulldown-loading="onScrollTop()"
      >
        <div class="tabContainWrap">
          <div v-for="item,index in list" class="flex">
            <div>
              <div class="font14">
                {{item.title}}第{{item.turns}}轮捐助 {{item.paycoin}}{{item.areamark}}
              </div>
              <div class="font13" style="color: #C3C3C3;">
                <span>{{item.inputtime}}</span>
              </div>
            </div>
            <div
              class="font16"
              :class="{'red':item.state === 1 || item.state === 2,'green':item.state === 0,'black':item.state === 3}">
            {{item.state | stateInvest}}
            </div>
          </div>
          <div v-if="list.length==0" style="text-align: center;height: 300px;line-height: 300px;margin-left: -18px;border-bottom: none">
            暂无数据
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
  import Header from '../common/header.vue'
  import Clipboard from 'clipboard';
  import {Tab,TabItem,Scroller } from 'vux'
  export default{
    data(){
      return {
        indexTab:0,
        list:[{}],
        onFetching:false,
        onFetching1:false,
        page:{
          total:0,
          pageno:1,
          pagesize:10
        },
        getBarWidth: function (index) {
          return (index + 1) * 22 + 'px'
        },
        direction:1,// 1充 2提
        id:'',
        mark:'',
        current:{},
        listDown:[],
        markShow:false,
        showRightDwon:false,
      }
    },
    methods:{
      maskHide(){
        this.showRightDwon = false;
        this.markShow = false;
      },
      seleCoin(){
        this.showRightDwon = !this.showRightDwon;
        this.markShow = !this.markShow
      },
      downItem(data){
        this.current =data;
        this.showRightDwon = false;
        this.markShow = false;
        this.onScrollTop()
//        this.walletlist(this.current.aid)
      },
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.page.page = 1;
          this.list = [];
          this.investrecord('pullDown');
        }
      },
      onScrollBottom () {
        if (this.onFetching) {} else {
          this.onFetching = true;
          var that = this;
          that.page.page ++;
          this.investrecord('pullUp');
        }
      },
      clickTabItem(){
        this.list = [];
        this.page.page = 1;
        this.investrecord('pullDown');
      },
      investrecord(type){
        this.loading(true);
        this.service('investrecord',{
          area:this.current.aid,
          pageno:this.page.page,
          pagesize:this.page.pagesize
        },'post').then((res)=>{
          this.loading(false);
          this.list =  [...this.list,...res.data.list];
//          this.list = res.data.list
          this.page.total = Math.ceil (res.data.total / this.page.pagesize);
          this.$nextTick(() => {
            if(this.page.total == 0 || (this.page.total == this.page.page)){
              this.$refs.scrollerIncome.disablePullup();
              this.$refs.scrollerIncome.reset({top:0});
            }else{
              if(type === 'pullDown'){
                this.$refs.scrollerIncome.reset({top:0});
              }
              this.$refs.scrollerIncome.donePulldown();
              this.$refs.scrollerIncome.enablePullup();
            }
          })
          this.onFetching = false;
          this.onFetching1 = false;
        })
      },
      copy(index){
        var that = this;
        this.copyBtn = new Clipboard('#item'+index);
        let clipboard = this.copyBtn;
        clipboard.on('success',(res)=> {
          that.toastFn('复制成功','','success');
          clipboard.destroy();
          that.$emit('copySuccess')
        })
        clipboard.on('error', ()=>{
          that.toastFn('复制失败，请手动复制');
          clipboard.destroy()
        })
      },
      areawallet(){
        this.service('area', {}).then(res=> {
          this.listDown = res.data.arealist;
          if(!this.$route.params.id){
              this.aid = res.data.arealist[0].aid;
              this.mark = res.data.arealist[0].mark;
          }else{
            this.aid = this.$route.params.id;
            this.mark = this.$route.params.mark;
          }
          this.current = {aid:this.aid,mark:this.mark}
          this.onScrollTop();
        })
      },
    },
    created(){
      this.areawallet()
    },
    components:{
      Header,
      Tab,
      TabItem,
      Clipboard,
      Scroller
    }
  }
</script>
<style>
  .donationRecord .vux-tab{
    background: #1F1F28;
  }
  .donationRecord .vux-tab .vux-tab-item{
    background:none;
  }
  .tabContain .tabContainWrap{
    margin-left: 18px;
  }
  .tabContain .tabContainWrap>div{
    padding:12px 18px 12px 0;
    border-bottom: 1px solid #3A3A47;
  }
  .red{
    color:#F5646E;
  }
  .green{
    color:#14BE75;
  }
  .black{
    color:#333333;
  }
  .donationRecord .vux-header .vux-header-right{
    right: 0;
    background: #454555;
    height: 32px;
    line-height: 32px;
    padding:0 10px 0 15px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    top:8px;
    width: 110px;
    z-index:16!important;
    box-sizing: border-box;
  }
</style>
